<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>车辆管理</title>
<link rel="stylesheet" href="${ctx}/resources/layui/css/layui.css">
<style type="text/css">
.thumbBox{ overflow:hidden; border:1px solid #e6e6e6; border-radius:2px; cursor:pointer; position:relative; text-align:center; line-height:153px;}
.thumbImg{ max-width:100%; max-height:100%; border:none;}
.thumbBox:after{ position:absolute; width:100%; height:100%;line-height:153px; z-index:-1; text-align:center; font-size:20px; content:"上传车辆图片"; left:0; top:0; color:#9F9F9F;}
</style>
</head>
<body style="padding: 10px;">
	<!--  搜索条件开始 -->
	<form class="layui-form" method="post" id="searchFrm"
		lay-filter="searchFrm">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">车牌号</label>
				<div class="layui-input-inline">
					<input type="text" name="carnumber" autocomplete="off"
						class="layui-input">
				</div>
				<label class="layui-form-label">类型</label>
				<div class="layui-input-inline">
					<input type="text" name="cartype" autocomplete="off"
						class="layui-input">
				</div>

				<label class="layui-form-label">颜色</label>
				<div class="layui-input-inline">
					<input type="text" name="color" autocomplete="off"
						class="layui-input">
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">车辆描述</label>
				<div class="layui-input-inline">
					<input type="text" name="description" autocomplete="off"
						class="layui-input">
				</div>
				<label class="layui-form-label">出租状态</label>
				<div class="layui-input-inline">
					<input type="radio" name="isrenting" value="1" title="出租中">
					<input type="radio" name="isrenting" value="0" title="在库">
				</div>
				<button type="button" class="layui-btn layui-icon layui-icon-search"
					lay-submit="" lay-filter="doSearch">查询</button>
				<button type="reset"
					class="layui-btn layui-btn-warm layui-icon layui-icon-refresh">重置</button>
			</div>
		</div>
	</form>
	<!-- 搜索条件结束-->
	<!-- 数据表格开始 -->
	<table class="layui-hide" id="carTable" lay-filter="carTable"></table>
	<!-- 数据表格结束 -->
	<!-- 表格头部工具栏开始 -->
	<div style="display: none;" id="carToolbar">
		<button type="button" class="layui-btn" lay-event="add">添加</button>
		<button type="button" class="layui-btn layui-btn-danger"
			lay-event="batchDelete">批量删除</button>
	</div>
	<!-- 表格头部工具栏结束 -->
	<!-- 表格行工具栏开始 -->
	<div style="display: none;" id="carRowbar">
		<button type="button" class="layui-btn layui-btn-sm"
			lay-event="update">修改</button>
		<button type="button" class="layui-btn layui-btn-sm  layui-btn-danger"
			lay-event="delete">删除</button>
		<button type="button" class="layui-btn layui-btn-sm"
			lay-event="showCarImg">查看大图</button>
	</div>
	<!-- 表格行工具栏结束 -->
	<!-- 添加和修改弹出层开始 -->
	<div style="display: none;padding: 10px;" id="addOrUpdateDiv">
		<form class="layui-form layui-row layui-col-space10" method="post" lay-filter="dataFrm"
			id="dataFrm">
			<div class="layui-row layui-col-space10">
				<div class="layui-col-md8 layui-col-xs7">
					<div class="layui-form-item">
						<label class="layui-form-label">车牌号</label>
						<div class="layui-input-block">
							<input type="text" id="carnumber" name="carnumber" class="layui-input" lay-verify="required"
								placeholder="请输入车牌号">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">车辆类型</label>
						<div class="layui-input-block">
							<input type="text" name="cartype" class="layui-input" placeholder="请输入车辆类型">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">车辆颜色</label>
						<div class="layui-input-block ">
							<input type="text" name="color" class="layui-input" placeholder="请输入车辆颜色">
						</div>
					</div>
				</div>
				<div class="layui-col-md4 layui-col-xs5">
					<!-- upload渲染依赖的div -->
					<div class="layui-upload-list thumbBox" id="carimgDiv">
						<!-- 显示上传的图片 -->
						<img class="layui-upload-img thumbImg" id="carimgImg">
						<!-- 保存上传的图片的路径信息，以存入数据库 -->
						<input type="text" id="carimg" name="carimg" hidden="">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">车辆价格</label>
					<div class="layui-input-inline">
						<input type="number" name="price"  class="layui-input" placeholder="请输入车辆价格">
					</div>
				</div>
				<label class="layui-form-label">出租价格</label>
				<div class="layui-input-inline">
					<input type="number" name="rentprice"  class="layui-input" placeholder="请输入出租价格">
				</div>

			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">出租押金</label>
					<div class="layui-input-inline">
						<input type="number" name="deposit" class="layui-input" placeholder="请输入出租押金">
					</div>
					<label class="layui-form-label">出租状态</label>
					<div class="layui-input-inline">
						<input type="radio" name="isrenting" value="0" title="在库" checked="checked"> 
						<input type="radio" name="isrenting" value="1" title="出租中">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">车辆描述</label>
					<div class="layui-input-block">
						<textarea name="description" class="layui-textarea" placeholder="请输入车辆描述"></textarea>
					</div>
				</div>
			</div>
			<div class="layui-form-item" style="margin: 10px; text-align: center;">
				<div class="layui-input-block">
					<button type="button"
						class="layui-btn layui-icon layui-icon-release" lay-submit=""
						lay-filter="doSubmit">保存</button>
					<button type="reset" id="dataFrmResetBtn"
						class="layui-btn layui-btn-warm layui-icon layui-icon-refresh">重置</button>
				</div>
			</div>
	</form>
	</div>
	<!--   添加和修改弹出层结束 -->
	<!-- 查看大图弹出层 开始 -->
	<div class="layui-carousel" id="showCarImgDiv">
  		<div carousel-item="" id="showCarImgContent">
  			
  		</div>
	</div>
	<!-- 查看大图弹出层 结束 -->
	
	<script src="${ctx}/resources/layui/layui.js"></script>
	<script>
		var tableIns;
		layui.use([ 'layer', 'table', 'form', 'upload','carousel'],function() {
		var $ = layui.$;
		var layer = layui.layer;
		var table = layui.table;
		var form = layui.form;
		var upload = layui.upload;
		var carousel = layui.carousel;
		//初始化车辆数据表格
		tableIns = table.render({
			elem : '#carTable' //渲染的目标对象
			,url : '${ctx}/car/carList.action' //数据接口
			,title : '车辆列表'
			,toolbar : "#carToolbar" //表头的工具条
			,height : "full-150"
			,page : true //是否启用分页
			,cols : [ [ 
				{type : 'checkbox',fixed : 'left'}, 
				{field : 'carnumber',title : '车牌号',align : "center",width : "150"}, 
				{field : 'cartype',title : '类型',align : "center",width : "100"}, 
				{field : 'color',title : '颜色',align : "center",width : "100"}, 
				{field : 'isrenting',title : '出租状态',align : "center",width : "100",templet:function(d){
					if(d.isrenting==1){
						return "<span style='color:blue;'>出租中</span>";
					}else{
						return "<span style='color:green;'>在库</span>";
					}
				}}, 
				{field : 'price',title : '购买价格',align : "center",width : "100"}, 
				{field : 'rentprice',title : '出租价格',align : "center",width : "100"}, 
				{field : 'deposit',title : '出租押金',align : "center",width : "100"}, 
				{field : 'description',title : '描述',align : "center",width : "200"}, 
				{field : 'carimg',title : '预览图',align : "center",width : "150",templet:function(d){
					return "<img height='100%' src='${ctx}/file/downloadFile.action?path="+d.carimg+"' alt='车辆缩咯图'></img>";					
				}}, 
				{field : 'createtime',title : '录入时间',align : "center",width : "180"}, 
				{fixed : 'right',title : '操作',toolbar : "#carRowbar",align : "center",width : "220"}
			] ],
			done : function(res, curr, count) {
				//判断当前页码是否大于1
				if (curr > 1 && res.data.length == 0) {
					var pageValue = curr - 1;
					tableIns.reload({
						page : {
							curr : pageValue
						}
					});
				}
			}
		});
		//监听查询表单的提交
		form.on("submit(doSearch)", function(data) {
			if(data.field.isrenting == undefined){
				data.field.isrenting = "";
			}
			tableIns.reload({
				where : data.field,
				page : {
					curr : 1
				}
			});
			return false;
		})
		//1. 监听头工具栏事件 
		table.on("toolbar(carTable)", function(obj) {
			switch (obj.event) {
			case "add":
				openAddCar();
				break;
			case "batchDelete":
				batchDelete();
				break;
			}
		});
		//弹出层实例
		var mainIndex;
		//弹出层对应的提交url
		var url;
		//打开添加车辆弹出层
		function openAddCar() {
			mainIndex = layer.open({
				type : 1,
				title : "添加车辆",
				content : $("#addOrUpdateDiv"),
				area : [ '850px', "450px"],
				success : function(ayero, index) {
					//清空表单数据 jquery对象转dom对象，有reset函数
					$("#dataFrm")[0].reset();
					$('#carimgImg').attr('src', "");
					//提交路径
					url = "${ctx}/car/addCar.action";
					$("#carnumber").removeAttr("readonly");
				}
			});
	
		}
		//监听添加或修改用户弹出层的提交操作
		form.on("submit(doSubmit)",function(data) {
			//序列化表单数据
			var params = $("#dataFrm").serialize();
			//console.log(params);
			$.post(url, params, function(result) {
				if (result.success) {
					//刷新数据表格
					tableIns.reload();
				}
				//显示响应提示信息
				layer.msg(result.message);
				//关闭弹出层
				layer.close(mainIndex);
			});
			//阻止表单提交
			return false;
		});
	
		//批量删除
		function batchDelete() {
			//获取当前选中行
			var checkStatus = table.checkStatus('carTable');
			//判断是否有选中行
			var length = checkStatus.data.length;
			if (length > 0) {
				layer.confirm("确定删除这[ " + length+ "]个车辆?",{icon : 3,title : "提示"},function(index) {
					var data = checkStatus.data;
					var params = "";
					$.each(data,function(i,item) {
						if (i == 0) {
							params += "carnumbers="+ item.carnumber;
						} else {
							params += "&carnumbers="+ item.carnumber;
						}
					});
					$.post("${ctx}/car/batchDeleteCar.action",params,function(result) {
						if (result.success) {
							//刷新数据表格
							tableIns.reload();
						}
						layer.msg(result.message);
					});
					//关闭提示框
					layer.close(index);
				});
			} else {
				layer.msg("请选择要删除的行!");
			}
		}
	
		//5. 监听行工具栏事件
		table.on('tool(carTable)', function(obj) {
			var data = obj.data; //获得当前行数据
			switch (obj.event) {
			case 'update':
				openUpdateCar(data);
				break;
			case 'delete':
				deleteCar(data);
				break;
			case 'showCarImg':
				showCarImg(data);
				break;
			}
		});
		//打开修改用户弹出层
		function openUpdateCar(data) {
			mainIndex = layer.open({
				type : 1,
				title : "修改车辆",
				content : $("#addOrUpdateDiv"),
				area : [ '850px', "450px"],
				success : function(ayero, index) {
					//回显表单
					form.val('dataFrm', data);
					$('#carimgImg').attr('src', "${ctx}/file/downloadFile.action?path="+data.carimg);
					//提交路径
					url = "${ctx}/car/updateCar.action";
					//设置只读
                    $("#carnumber").attr("readonly","readonly");
				}
			});
		}
	
		//删除车辆
		function deleteCar(data) {
			layer.confirm("是否删除车牌为 [" + data.carnumber + " ]的车辆?", {"icon" : 3,"title" : "提示"}, function(index) {
				$.post("${ctx}/car/deleteCar.action",
				{
					"carnumber" : data.carnumber
				}, function(result) {
					if (result.success) {
						//刷新数据表格
						tableIns.reload();
					}
					layer.msg(result.message);
				}, "json");
			});
		}
		//上传图片处理
		upload.render({
			elem : '#carimgDiv',
			url : '${ctx}/file/uploadFile.action',
			method : "post", //此处是为了演示之用，实际使用中请将此删除，默认用post方式提交
			acceptMime:"image/*",
			field:"mf",
			done : function(res, index, upload) {
				layer.msg(res.msg);
				$('#carimgImg').attr('src', "${ctx}/file/downloadFile.action?path="+res.data.src);
				$('#carimg').val(res.data.src)
			}
		});
		
		function showCarImg(data){
			var json =  {
					  "title": "查看大图", //相册标题
					  "id": 0, //相册id
					  "start": 0, //初始显示的图片序号，默认0
					  "data": [   //相册包含的图片，数组格式
					    {
					      "alt": data.carnumber,
					      "pid": 1, //图片id
					      "src": "${ctx}/file/downloadFile.action?path="+data.carimg, 
					      "thumb": "" //缩略图地址
					    }
					  ]
					};
			mainIndex = layer.photos({
			    photos: json
			    ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
			  }); 
		}
	});
	</script>
</body>
</html>